import { t } from 'i18next'
import { DragGlobal, THeaderWrap, useTableColumn } from '../../../../../components'
import { useParamsStore } from '../../../store'

export const THeader = () => {
	const [wrapRef, { onMouseDown, showLine, lineLeftStyle }, { onMouseDown2, showLine2, lineLeftStyle2 }] =
		useTableColumn()
	const { nameWidth, operateWidth, statusWidth } = useParamsStore((state) => state.tableWidth)
	const nameStyle = {
		width: nameWidth,
	}
	const actionStyle = {
		width: operateWidth,
	}
	const statusStyle = {
		width: statusWidth,
	}
	return (
		<THeaderWrap ref={wrapRef}>
			{(showLine || showLine2) && <DragGlobal />}
			<div className="name-column" style={nameStyle}>
				<span>{t('会议/终端')}</span>
			</div>
			<div className="action-column" style={actionStyle}>
				<b className="border-b" onMouseDown={onMouseDown} />
				{showLine && <p className="border-b-line" style={{ left: lineLeftStyle }} />}
				<span>{t('操作')}</span>
			</div>
			<div className="status-column" style={statusStyle}>
				<b className="border-b" onMouseDown={onMouseDown2} />
				{showLine2 && <p className="border-b-line" style={{ left: lineLeftStyle2 }} />}
				<span>{t('状态')}</span>
			</div>
		</THeaderWrap>
	)
}
